<template>
  <div>
    <el-button type="primary" @click="handleNew">添加员工</el-button>
    <el-table :data="tableData" border style="width: 100%;margin-top: 20px">
      <el-table-column prop="username" label="用户名" align="center"></el-table-column>
      <el-table-column prop="password" label="密码" align="center"></el-table-column>
      <el-table-column prop="position" label="职位" align="center">
        <template slot-scope="scope">{{ scope.row.position | postionFilter }}</template>
      </el-table-column>
      <el-table-column prop="address" label="地区" align="center"></el-table-column>
      <el-table-column prop="time" label="登录时间" align="center">
        <template slot-scope="scope">{{ scope.row.time | timeFilter }}</template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope.row)">修改</el-button>
          <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :title="dialogType==='edit'?'修改信息':'添加员工'"
      :before-close="closeDialog"
    >
      <el-form :model="form" :label-width="formLabelWidth" :rules="rules" ref="form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" autocomplete="off" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" autocomplete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="position">
          <el-select v-model="form.position" filterable placeholder="请选择职位" style="width:100%">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地区" prop="address">
          <el-input v-model="form.address" placeholder="请输入地区"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogType=='new'?addUser('form'):dialogType=='edit'?editUser('form'):dialogFormVisible=true"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Notification, MessageBox } from "element-ui";
export default {
  data() {
    return {
      tableData: [],
      // 添加、修改
      dialogType: "new",
      dialogFormVisible: false,
      form: {
        id: "",
        username: "",
        password: "",
        position: "",
        address: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [
          { min: 6, max: 16, message: "长度在 6 到 16 个字符", trigger: "blur" }
        ]
      },
      formLabelWidth: "100px",
      // 职位选择
      options: [
        {
          value: "0",
          label: "班主任"
        },
        {
          value: "1",
          label: "项目经理"
        }
      ]
    };
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      this.axios.get("/user/userAll").then(res => {
        this.tableData = res.data.data;
      });
    },
    // 打开添加员工弹框
    handleNew() {
      this.dialogType = "new";
      this.dialogFormVisible = true;
    },
    // 打开修改员工弹框
    handleEdit(item) {
      this.dialogType = "edit";
      this.dialogFormVisible = true;

      this.form.id = item.id;
      this.form.username = item.username;
      this.form.password = item.password;
      this.form.position = item.position;
      this.form.address = item.address;
    },
    // 添加员工
    addUser(formName) {
      var username = this.form.username;
      var password = this.form.password;
      var position = this.form.position;
      var address = this.form.address;
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.axios
            .post(
              "/user/adduser",
              `username=${username}&password=${password}&position=${position}&address=${address}`
            )
            .then(res => {
              if (res.data.ok == 1) {
                this.$notify({
                  title: "添加成功",
                  message: `${username} 添加成功`,
                  type: "success"
                });
                this.closeDialog();
                this.dialogFormVisible = false;
                this.load();
              } else {
                this.$notify({
                  title: "添加失败",
                  message: res.data.msg,
                  type: "error"
                });
                this.form.username = "";
              }
            });
        } else {
          alert("请输入合法用户名");
          this.form.username = "";
          return false;
        }
      });
    },
    // 修改员工
    editUser(formName) {
      var id = this.form.id;
      var username = this.form.username;
      var password = this.form.password;
      var position = this.form.position;
      var address = this.form.address;
      this.axios
        .post(
          "/user/update",
          `username=${username}&password=${password}&position=${position}&address=${address}&id=${id}`
        )
        .then(res => {
          if (res.data.ok == 1) {
            this.$notify({
              title: "修改成功",
              message: `${username} 修改成功`,
              type: "success"
            });
            this.closeDialog();
            this.dialogFormVisible = false;
            this.load();
          } else {
            this.$notify({
              title: "修改失败",
              message: res.data.msg,
              type: "error"
            });
            this.form.username = "";
          }
        });
    },
    // 删除员工
    del(item) {
      this.$confirm(`是否删除名称为 "${item.username}" 用户?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.axios.post("/user/delete", `id=${item.id}`).then(res => {
            if (res.data.ok == 1) {
              this.$message({
                type: "success",
                message: res.data.msg
              });
              this.load();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    closeDialog() {
      for (var item in this.form) {
        this.form[item] = "";
      }
      this.dialogFormVisible = false;
    }
  }
};
</script>

<style>
</style>